<template>
	<el-table
		ref="multipleTable" border
		:data="tableData"
		:default-sort="{ prop: 'name', order: 'descending' }"
		:row-style="{ height: '0' }"
		:cell-style="{ padding: '0' }"
		size="medium" 
		style="width: 100%"
		highlight-current-row 
	>
		<el-table-column align="center" type="selection" width="55" />
		<el-table-column align="center" label="序号" type="index" width="60"> </el-table-column> 
		<el-table-column align="center" property="no" width="200" sortable label="物证编号" show-overflow-tooltip />
		<el-table-column align="center" property="casePerson" width="280" sortable label="物证名称/数量" show-overflow-tooltip>
			<template #default="scope">{{ `${scope.row.name}/${scope.row.quantity}` }}</template>
		</el-table-column>
		<el-table-column align="center" property="location"  width="200" sortable label="存放位置" show-overflow-tooltip />
		<el-table-column align="center" property="pdSt" sortable width="100" label="盘点状态" show-overflow-tooltip />
		<el-table-column align="center" property="status" sortable width="100" label="物证状态" show-overflow-tooltip>
			<template #default="scope">{{ getEvidenceStatus(scope.row.status) }}</template>
		</el-table-column>
	</el-table>
	<el-pagination
		:page-sizes="[10, 20, 50, 100]"
		:page-size="formInline.pageSize"
		layout="prev, pager, next, jumper,total,sizes"
		:total="total"
		@size-change="onHandleSizeChange"
		@current-change="onHandleCurrentChange"
		prev-text="上一页"
		next-text="下一页"
		background
	>
	</el-pagination>
</template>

<script lang="ts">
import { reactive, toRefs } from 'vue';
import { getPanDianDetail } from '/@/api/case/index';
import { dateFormat } from '/@/common/index'; 
import { getEvidenceStatus } from '/@/common/index';

export default {
	name: 'EvidenceUnitCase',
	setup() {
		const state = reactive({
			formInline:{
				id:0,
				page:1,
				pageSize:10
			},
			tableData: [],
			total: 0,
			checkRecords: [],
		});
		function init(id) { 
			state.formInline.id = id;
			getPanDianDetail(state.formInline).then((res: any) => {
				if (res.success) {
					state.tableData = res.data.data;
					state.total = res.data.totalCount;
				}
			});
		}
		function onHandleSizeChange(pageSize: number) {
			state.formInline.pageSize = pageSize;
			init(state.formInline.id);
		}
		function onHandleCurrentChange(pageIndex: any) {
			state.formInline.page = pageIndex;
			init(state.formInline.id);
		}
		return {
			dateFormat,
			init,
			onHandleSizeChange,
			getEvidenceStatus,
			onHandleCurrentChange,
			...toRefs(state),
		};
	},
};
</script>
<style scoped>
.el-input,
.el-select,
.el-date-picker {
	width: 220px;
}
</style>
